<template>
    <rui-page :defines="defines">
        <Row>
            <rui-query :label-width="120"
                       :query="queryFlowConfigData"
                       :query-rows="queryRows"
                       ref="flowServiceConfig"
            />
        </Row>
        <rui-table :defineId="'flowConfigDefine'"
                   :fixedLeft="['greatWallServiceId']"
                   :fixedRight="['action']"
                   :showIndex="false"
                   :select="false"
                   :slots="[{key:'action',slot:'action'}]"
                   @loadDatas="queryFlowConfigData"
                   ref="configTable"
                   ref-query="flowServiceConfig">
            <template slot="toolBar">
                <Button @click="createFlowMapping" icon="ios-add" type="primary" >添加</Button>
            </template>
            <template slot="action" slot-scope="{ row }">
                <div>
                    <Button @click="edit(row)" size="small" type="primary" >编辑</Button>
                    <Button @click="delConfig(row)" size="small" type="primary" >删除</Button>
                </div>
            </template>
        </rui-table>
        <Modal
            :closable="false"
            :mask-closable="false"
            :title="flowConfigTitle"
            :width="800"
            v-model="flowConfig">
            <rui-form :form-options="flowConfigFormOptions"
                      :label-width="120"
                      :read-only="false"
                      ref="editForm">
            </rui-form>
            <div slot="footer">
                <Button @click="flowConfig = false" size="small">取消</Button>
                <Button @click="checkFlowConfig" size="small" type="primary">保存</Button>
            </div>
        </Modal>
    </rui-page>
</template>

<script>
    import flowConfigDefine from "./defines/flow-config-define";
    import {listFLowMapping, saveFLowMapping, deleteFLowMapping} from "_p/basic/api/flowconfig/flow-config"
    import {deepClone} from "@/libs/utils/ObjectClone";
    export default {
        name: "flow-service-config",
        data() {
            return {
                defines:[],
                flowConfig: false,
                modelType: '',
                flowConfigTitle: '流程映射编辑',
                validateRules: {},
                queryRows: [
                    {
                        defineId: 'flowConfigDefine',
                        totalSpan: 16,
                        fields: ['greatWallServiceId', 'greatWallServiceName']
                    }
                ],
                flowConfigFormOptions: [
                    {
                        isGroup: false,
                        grids: [
                            {defineId: 'flowConfigDefine', span: 12, fields: ['greatWallServiceId','serviceName']},
                            {defineId: 'flowConfigDefine', span: 12, fields: ['greatWallServiceName','afsFlowKey']},
                            {defineId: 'flowConfigDefine', span: 12, fields: ['autoProcessTypes']},
                        ]
                    }
                ]
            };
        },
        methods: {
            queryFlowConfigData(queryData) {
                listFLowMapping(queryData).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        this.$refs.configTable.updateTableData(records, total);
                    }
                });
            },
            createFlowMapping() {
                this.flowConfigTitle = '新建流程映射';
                this.$refs.editForm.setAllFieldRequired(true);
                this.modelType = 'new';
                let self = this;
                this.$nextTick(() => {
                    self.$refs.editForm.resetFrom();
                    this.flowConfig = true;
                })
            },
            delConfig(row) {
                let self = this;
                this.$Modal.confirm({
                    title: "确认",
                    content: `确认删除该条流程映射[${row.greatWallServiceName}]？`,
                    onOk: () => {
                        deleteFLowMapping(row).then(res => {
                            self.$refs['configTable'].reloadData();
                        })
                    }
                });
            },
            edit(row) {
                this.flowConfigTitle = '配置' + row.greatWallServiceName + "(" + row.greatWallServiceId + ")";
                this.modelType = 'modify';
                this.$refs.editForm.updateFormData(deepClone(row));
                this.$refs.editForm.setAllFieldRequired(true);
                this.flowConfig = true;
            },
            checkFlowConfig() {
                let self = this;
                this.$refs.editForm.getForm().validate((valid) => {
                    if (valid) {
                        let reqData = self.$refs.editForm.getFormData();
                        saveFLowMapping(reqData).then(res => {
                            if (res.code === '0000') {
                                self.$refs['configTable'].reloadData();
                                self.flowConfig = false;
                            } else {
                                self.$Message.error(res.msg);
                            }
                        }).catch(err => {

                        })
                    } else {
                        self.flowConfig = true;
                        self.$Message.error('数据不完整!');
                    }
                })
            }
        },
        computed: {

        },
        created(){
            this.defines.push({id:'flowConfigDefine',fields: flowConfigDefine});
        },
        mounted() {
            this.$refs['configTable'].reloadData();
        }
    };
</script>
